<template>
  <div class="block">

    <el-container>
      <div class="el-main">
        <div class="container-top">
          <div class="block block-custom">
            <div style="margin-top: 10px; margin-left: 10px;">

            <label class="label-text">站场名称</label>
            <el-select v-model="queryData.station" placeholder="请选择" clearable style="width: 90px" class="filter-item">
              <el-option v-for="(item, index) in stationNameOptions" :key="index" :label="item" :value="item" />
            </el-select>

            <label class="label-text">开始时间</label>
            <el-date-picker
            v-model="queryData.startTime"
            type="date"
            placeholder="选择日期时间"
            placement="bottom-start"
            >
            </el-date-picker>

            <label class="label-text">结束时间</label>
            <el-date-picker
            v-model="queryData.endTime"
            type="date"
            placeholder="选择日期时间"
            placement="bottom-start"
            >
            </el-date-picker>

            <el-button  @click="reset">
              重置
            </el-button>
            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">
              查询
            </el-button>
            </div>

            <div>
            <el-table
            :key="tableKey"
            v-loading="listLoading"
            :data="rcvTableData"
            border
            fit
            highlight-current-row
            style="width: 100%;"
            ref='refsTable'
            >
              <el-table-column label="序号" prop="id" align="center" width="50px">
                <template slot-scope="scope">
                  <span>{{ (scope.$index) + (currentPage-1)*pageSize }}</span>
                </template>
              </el-table-column>
              <el-table-column label="站名" width="60px" align="center">
                <template slot-scope="{row}">
                  <span>{{ row.STATION }}</span>
                </template>
              </el-table-column>

              <el-table-column label="统计时间" width="80px" align="center">
                <template slot-scope="{row}">
                  <span>{{ row.TJSJ }}</span>
                </template>
              </el-table-column>

              <el-table-column label="待装" width="50px" align="center">
                <template slot-scope="{row}">
                  <span>{{ row.DZC }}</span>
                </template>
              </el-table-column>

              <el-table-column label="待卸" align="center" width="50px">
                <template slot-scope="{row}">
                  <span>{{ row.DXC }}</span>
                </template>
              </el-table-column>

              <el-table-column label="待送" align="center" width="50px">
                <template slot-scope="{row}">
                <span>{{ row.DSC }}</span>
                </template>
              </el-table-column>

              <el-table-column label="待取" align="center" width="50px">
                <template slot-scope="{row}">
                <span>{{ row.DQC }}</span>
                </template>
              </el-table-column>
              
              <el-table-column label="老牌车24<=X<48h" width="80px">
                <template slot-scope="{row}">
                  <span>{{ row.LPC24 }}</span>
                </template>
              </el-table-column>

              <el-table-column label="老牌车48<=X<72h" width="80px">
                <template slot-scope="{row}">
                  <span>{{ row.LPC48 }}</span>
                </template>
              </el-table-column>

              <el-table-column label="老牌车X>=72h" width="80px">
                <template slot-scope="{row}">
                  <span>{{ row.LPC72 }}</span>
                </template>
              </el-table-column>

              <el-table-column label="中时" align="center" width="50px">
                <template slot-scope="{row}">
                  <span>{{ row.ZS }}</span>
                </template>
              </el-table-column>

              <el-table-column label="停时" class-name="status-col" width="50px">
                <template slot-scope="{row}">
                  <span>{{ row.TS }}</span>
                </template>
              </el-table-column>
              
              <el-table-column label="批数" align="center" width="50px">
                <template slot-scope="{row}">
                  <span>{{ row.DCPS }}</span>
                </template>
              </el-table-column>

              <el-table-column label="钩数" align="center" width="50px">
                <template slot-scope="{row}">
                  <span>{{ row.DCGS }}</span>
                </template>
              </el-table-column>

              <el-table-column label="辆数" align="center" width="50px">
                <template slot-scope="{row}">
                  <span>{{ row.DCLS }}</span>
                </template>
              </el-table-column>

              <el-table-column label="运用车" align="center" width="80px">
                <template slot-scope="{row}">
                  <span>{{ row.YYC }}</span>
                </template>
              </el-table-column>

              <el-table-column label="前一班出发" align="center" width="70px">
                <template slot-scope="{row}">
                  <span>{{ row.QYBCF }}</span>
                </template>
              </el-table-column>

              <el-table-column label="前一班到达" align="center" width="70px">
                <template slot-scope="{row}">
                  <span>{{ row.QYBDD }}</span>
                </template>
              </el-table-column>

              <el-table-column label="实际出发" align="center" width="80px">
                <template slot-scope="{row}">
                  <span>{{ row.SJCF }}</span>
                </template>
              </el-table-column>

              <el-table-column label="实际到达" align="center" width="80px">
                <template slot-scope="{row}">
                  <span>{{ row.SJDD }}</span>
                </template>
              </el-table-column>

            </el-table>
            </div>

            <div>
            <el-pagination background layout="total, sizes, prev, pager, next" @size-change="handleSizeChange"
              @current-change="handleCurrentChange" :page-size="pageSize" :page-sizes="[10, 50, 100, 200, 500]"
              :total="totalDataLength" :current-page="currentPage" align="center">
            </el-pagination>
            </div>
          </div>
        </div>

      </div>
    </el-container>
  </div>
</template>


<script>
require('../components/echartsThreme')
import reportChart from './chart'
import { getStationNames } from "@/api/dataQuery" 
import { getReportAnalysisInfo } from "@/api/statistics"
import { isStringEmpty } from '@/utils/validate'
import { getFormatDate, getPreviousDayFormatDate } from '@/utils/datetime'

export default {
  data() {
    return {
      queryData: {
        station: '',
        startTime: getPreviousDayFormatDate(),
        endTime: getFormatDate(new Date()),
        // page: 1,
        // limit: 10
      },
      listLoading: true,
      tableKey: 0,
      currentPage: 1,
      pageSize: 10,
      totalDataLength: 0,
      stationNameOptions: [],
      rcvTableData: [],
      tableHeight: 0
    }
  },
  components: {
    reportChart
  },
  created() {
    this.getAllStationNames()
    // this.getAllReportAnalysisInfo()
  },
  mounted() {
    this.$nextTick(() => {
      // 根据浏览器高度设置初始高度
      this.tableHeight = window.innerHeight - this.$refs.refsTable.$el.offsetTop - 150
      // 监听浏览器高度变化，修改表格高度
      window.onresize = () => {
        this.tableHeight = window.innerHeight - this.$refs.refsTable.$el.offsetTop - 150
      }
    })
  },
  computed: {
  },
  watch: {
    "queryData.startTime": function (newTime, oldTime) {
      if (!newTime) {
        this.queryData.startTime = getPreviousDayFormatDate()
      }
    },
    "queryData.endTime": function (newTime, oldTime) {
      if (!newTime) {
        this.queryData.endTime = getFormatDate(new Date())
      }
    }
  },
  methods: {
    async getAllReportAnalysisInfo() {
      this.listLoading = true

      if (isStringEmpty(this.queryData.station)) {
        this.$message.info('站名不能为空！')
        return
      }

      this.globalTableData = []
      // this.queryData.page = this.currentPage
      // this.queryData.limit = this.pageSize
      const res = await getReportAnalysisInfo(this.queryData)
      // if (res.msg) {
      //   this.$message.info(res.msg)
      // } 
      this.totalDataLength = res.data.length
      this.rcvTableData = res.data
      this.listLoading = false
    },
    async getAllStationNames() {
      this.stationNameOptions = []
      const res = await getStationNames()
      if (res.code === 0) {
        this.stationNameOptions = res.data
      } 
    },
    reset() {
      this.totalDataLength = 0
      this.rcvTableData = []
      this.queryData.startTime = getPreviousDayFormatDate()
      this.queryData.endTime = getFormatDate(new Date())
      this.queryData.station = ''
    },
    search() {
      this.getAllReportAnalysisInfo()
    },
    handleCurrentChange: function (currentPage) {
      this.currentPage = currentPage;
      this.getAllReportAnalysisInfo()
    },
    handleSizeChange: function (size) {
      this.pageSize = size
      this.getAllReportAnalysisInfo()
    }
  }
}
</script>

<style lang="scss" scoped>

@import '../style.scss'

</style>
